<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>

    <link rel="stylesheet" href="../static/iconfont.css"/>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Microsoft YaHei";
            background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
            height: 760px;
            color: #ffffff;
            line-height: 1.8;
        }

        .main {
            max-width: 500px;
            margin: 30px auto;
            padding: 20px;
        }

        .log {
            background: rgba(255, 255, 255, 0.5);
            color: #333333;
            padding: 15px 25px;
            text-align: center;
        }

        .inputs {
            width: 100%;
            padding: 10px;
            margin: 5px;
        }

        .inputs button {
            display: block;
            width: 40%;
            padding: 10px;
            margin: auto;
        }

        #psw, #username {
            padding: 15px 10px;
            padding-bottom: 5px;
            width: 100%;
            background-color: #00000000;
            border: none;
            border-bottom: 1px solid #333333;
        }

        .divUser {
            text-align: right;
        }

        input {
            outline: none;
        }

        .err {
            color: red;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="log">
        <h1>登 录</h1>
        <p>请使用您的用户名密码进行登录</p>
        <div class="mainLog">
            <form action="/login">
                <div class="inputs" id="divUser">
                    <span class="iconfont icon-nickname"></span>
                    <input type="text" name="username" id="username" placeholder="用户名" style="width: 365px;">
                </div>
                <div class="inputs" id="divPsw">
                    <span class="iconfont icon-visible"></span>
                    <input type="password" name="psw" id="psw" placeholder="密码" style="width: 330px;">
                    <img
                            id="demo_img"
                            onclick="hideShowPsw()"
                            src="../static/visible.png"
                            width="30px"
                    />
                </div>
                <div class="inputs">
                    <button type="button" onclick="login()">登 录</button>
                </div>
                <div>
                    没有账号？<a href="/register">创建一个</a>
                </div>
                <!-- 控制密码可见性 -->
                <script type="text/javascript">
                    var demoImg = document.getElementById("demo_img");
                    var demoInput = document.getElementById("psw");

                    function hideShowPsw() {
                        if (demoInput.type == "password") {
                            demoInput.type = "text";
                            demoImg.src = "../static/invisible.png";
                        } else {
                            demoInput.type = "password";
                            demoImg.src = "../static/visible.png";
                        }
                    }
                </script>
            </form>
            <div class="err" id="noUser"></div>
        </div>
    </div>
</div>
</body>
<script src="../static/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function login() {
        var username = $("#username").val();
        var psw = $("#psw").val();
        {#console.log(username);#}
        var data = {"username": username, "psw": psw};
        console.log(data);
        $.ajax({
            type: "post",
            url: "/login",
            data: JSON.stringify(data),
            contentType: 'application/json; charset=UTF-8',
            success: function (uname) {
                console.log("success!");
                if (uname === {}) {
                    console.log(1);
                    $("#noUser")[0].innerHTML = "用户名或密码不能为空!";
                } else if (uname.username !== "") {
                    console.log(2);
                    var str = "/welcome?username=" + uname.username;
                    window.location.href=str;
                } else {
                    console.log(3);
                    $("#noUser")[0].innerHTML = "用户名或密码错误!";
                }

            },
            error: function () {
                console.log("error!");
            }
        })
    }
</script>
</html>